<template>
  <div>
    <div class="js-api">
      <h2>JS API示例</h2>
      <div class="search-box">
        <i class="icon icon-search"></i>
        <input type="text"
               placeholder="在 JS API 示例中搜索"
               v-model="searchVal" />
      </div>
      <div class="side-wrap">
        <div class="sidebar">
          <div class="map-menu"
               v-for="subTitle in data"
               :key="subTitle.title">
            <strong v-if="subTitle.title">{{subTitle.title}}</strong>
            <sideRow v-for="item in subTitle.secondTitle"
                     :key="item.title"
                     :data="item"
                     @itemClick="itemClick">
            </sideRow>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import sideRow from './sideRow.vue'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      sideRow
    },
    computed: {
      ...mapGetters([
        'data'
      ])
    },
    data () {
      return {
        searchVal: '',
        activeName: [].concat('地图属性'),
      }
    },
    provide () {
      return {
        side: this
      };
    },
    mounted () {
      let path = this.$route.path
      this.data.forEach(item => {
        let { secondTitle } = item
        secondTitle.forEach(second => {
          let { title, contents } = second
          contents.forEach(content => {
            if (content.path === path) {
              this.activeName = [title]
            }
          })
        })
      });
    },
    methods: {
      itemClick (name) {
        let active = (this.activeName[0] || this.activeName[0] === 0) && this.activeName[0] === name ? '' : name
        active = [].concat(active)
        this.activeName = active
      }
    }
  }
</script>
<style scoped>
  .search-box {
    position: relative;
    z-index: 2;
  }
  .side-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 100px;
    overflow: hidden;
  }
  .sidebar {
    height: 100%;
    overflow: auto;
  }
  .sidebar::-webkit-scrollbar {
    display: none;
  }
  .map-menu {
    padding: 0 20px;
    overflow: hidden;
  }
  .map-menu strong {
    font-weight: bold;
    font-size: 16px;
    line-height: 30px;
    color: #324053;
    cursor: pointer;
  }
  h2 {
    font-size: 16px;
    margin: 20px 0;
    margin-left: 20px;
  }
  input {
    margin-left: 20px;
    width: 204px;
    height: 24px;
    font-size: 12px;
    outline: 0;
    padding: 0 0 0 26px;
    border: 1px solid #d3d6db;
    border-radius: 26.5px;
    background: url(//lbs.amap.com/web/public/dist/images/demo_center/demo_center_search.e83c4b.png)
      8px center no-repeat;
    background-size: 10px auto;
    margin-bottom: 20px;
  }
</style>



